import React, { Component } from 'react'
import { Table, Icon, Switch } from 'antd';
import { connect } from 'dva';

function CustomExpandIcon(props) {
  return (
    <Icon type={props.expanded ? "caret-down" : "caret-right"} onClick={e => props.onExpand(props.record, e)} />
  );
}

interface IProps {
  loading?: boolean;
  iLoading?: boolean;
  gLoading?: boolean;
  dispatch?: Function;
  plan?: Array<string>;
  data: Array<any>;
  id: string;
  match?: {
    params: {
      id: number
    }
  };
}

@connect(({ task_month, menu, loading }) => ({
  plan: task_month.plan || [],
  buttons: menu.buttons,
  loading: loading.effects['task_month/queryItem'],
  iLoading: loading.effects['task_month/updateRuleTask'],
}))
class FloorDetails extends Component<IProps> {

  state = {
    data: this.props.data
  }

  onChange = (v, t) => {
    const { dispatch, plan, id } = this.props;
    let params = {}

    if (!v.targetId) {
      params = {
        id,
        child: {
          [v.id]: {
            disable: !v.disable,
            type: v.type,
            name: v.name,
            question: Array.isArray(v.question) ? v.question.map(u => u.state) : [],
            id: v.id,
          }
        },
      }

      const ind = plan.findIndex(u => u === v.id);
      let { data } = this.state;
      data[ind] = {
        ...data[ind],
        disable: !data[ind].disable,
        children: data[ind].children.map(v => ({
          ...v,
          targetDisable: !data[ind].disable
        }))
      }

      this.setState({ data })

    } else {
      let { data } = this.state;
      const ind = plan.findIndex(u => u === v.targetId);
      const tmp = data[ind]
      const subId = v.id.split('#')[1];
      let child = tmp.children;

      const i =  Array.isArray(tmp.question) ? tmp.question.findIndex(u => u.id === subId) : -1;

      if (i !== -1) {
        child[i] = {
          ...child[i],
          state: (+child[i].state === 1) ? 2 : 1
        }
      }
      
      data[ind] = {
        ...data[ind],
        children: child
      }

      this.setState({ data })

      params = {
        id,
        child: {
          [tmp.id]: {
            disable: tmp.disable,
            type: tmp.type,
            name: tmp.name,
            id: tmp.id,
            question: Array.isArray(child) ? child.map(v => +v.state) : []
          }
        }
      }
    }
    dispatch({ type: 'task_month/updateRuleTask', payload: params })
  }

  render() {

    const { iLoading } = this.props;
    const { data } = this.state;

    const columns = [{
      title: '检查内容',
      dataIndex: 'name',
      key: 'name',
      render: (text, record, index) => (
        record.targetId ? <>{`${index+1}. ${text}`}</> : <>&nbsp;{text}</>
      ) 
    }, {
      title: '操作', key: 'x',
      render: (record) => (
        <Switch
          defaultChecked={!record.targetId ? (!record.disable) : (+record.state === 1)}
          onChange={this.onChange.bind(this, record)}
          disabled={record.targetDisable}
          loading={iLoading}
        />
      )
    }];

    return (
      <>
        <section style={{ width: '94%', marginLeft: '3%' }}>
          <Table
            columns={columns}
            dataSource={data}
            expandIcon={CustomExpandIcon}
            bordered
            indentSize={60}
            defaultExpandAllRows={true}
            loading={this.props.loading}
            pagination={false}
            rowKey="id"
          />
        </section>
      </>
    )
  }
}

export default FloorDetails;